<template>
  <div class="parent">
    <echartsDom v-if="isShowEcharts" style="width: 100%; height: 100%" :width="'100%'" :height="'100%'" :option="option" :type="type" />
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, onMounted, watch } from "vue";
import echartsDom from "./echartsDom.vue";

import { deviceStat } from "@/api/waterKanban";
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  type: {
    type: String,
    default: ""
  },
  annualQuotaProportionDTO: {
    type: Object,
    required: true
  }
});
const isShowEcharts = ref(false);
const state = reactive({
  option: {}
});
const { option } = toRefs(state);
const getoptions = () => {
  option.value = {
    backgroundColor: props.type == "dark" ? "#001e3b" : "",
    color: props.type == "dark" ? ["#04FF9D", "#00C2FF", "#ccc", "#FF0844"] : ["#3B82F6 ", "#28D892", "#FFC265", "#28D892", "#FF5639"],
    grid: {
      left: "20px",
      top: "20px",
      right: "0px",
      bottom: "0px",
      containLabel: true
    },
    legend: {
      top: "bottom"
    },
    tooltip: {
      confine: true
    },
    series: [
      {
        radius: ["35%", "55%"],
        data: [
          {
            value: props.annualQuotaProportionDTO.initialQuotaProportion ? props.annualQuotaProportionDTO.initialQuotaProportion : 0,
            name: "初始配额"
          },
          {
            value: props.annualQuotaProportionDTO.quotaProportion ? props.annualQuotaProportionDTO.quotaProportion : 0,
            name: "购买配额"
          },
          {
            value: props.annualQuotaProportionDTO.ccerProportion ? props.annualQuotaProportionDTO.ccerProportion : 0,
            name: "购买CCER"
          }
        ],
        type: "pie",
        emphasis: {
          focus: "series"
        },
        label: {
          formatter: "{d}% \n {b}"
        }
      }
    ],
    graphic: {
      type: "text",
      left: "center",
      top: "center",
      style: {
        text: "年度配额\n占比",
        textAlign: "center",
        fill: "#000",
        fontWeight: 600,
        lineHeight: 20,
        fontSize: 14
      }
    }
  };
};
watch(
  () => props.annualQuotaProportionDTO,
  newOption => {
    console.log(newOption);
    if (newOption != null) {
      isShowEcharts.value = true;
      getoptions();
    } else {
      isShowEcharts.value = false;
    }
  },
  {
    immediate: true
  }
);
</script>

<style scoped lang="scss">
.parent {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
